import React from "react";
import { useToggleButton,AriaToggleButtonProps } from "@react-native-aria/button";
import { useToggleState } from "@react-stately/toggle";
import { Pressable, Text, View } from "react-native";
import { useRef } from "react";
export function ToggleButton(props: any) {
  const ref = useRef(null);

  let state = useToggleState(props);
  let { buttonProps, isPressed } = useToggleButton(props , state, ref);
  const { isDisabled } = {...props};
  
  return (
    <View>
      <Pressable
        ref={ref}
        {...buttonProps}
        style={{
          backgroundColor: state.isSelected ? "rgb(9, 90, 186)" : "#e1e1e1",
          padding: 5,
        }}
      >

        <Text
          style={{
            color: isPressed ? "#f1f1f1" : "#000",
          }}
        >
       A simple toggle button { isDisabled ? "isDisabled true" : (state.isSelected ? "Selected" : "Not Selected") } 
        </Text>
      </Pressable>
    </View>
  );
}
